<template>
  <div class="me_head">
    <!-- 头像设置 -->
    <avatarSettings v-model:visible="visibleSetting" />

    <div>
      <div class="head_top">
        <div class="left_info">
          <div class="user_icon" @click="showSetAvatar">
            <img :src="`/imgs/head_icons/${hasLogin ? roleInfo.head_photo : 'default'}.webp`" alt="" class="mr-10">
            <img :src="`/imgs/level/newicon/level${hasLogin ? VIPinfo.current_vip_level : 1}.webp`" alt="" class="vip">
          </div>
          <div class="user_info" @click="toLogin">
            <span>{{ hasLogin ? userNameHiding(info.full_name) : t('登录后游戏') }}</span>
            <span>
              <ImgT :src="`/imgs/home/coin.webp`" alt="" /> {{ hasLogin ? userMoney : 0 }}
            </span>
          </div>
        </div>
        <div class="left_right" @click="router.push('/club')">
          <ImgT :src="`/imgs/level/iVip${hasLogin ? VIPinfo.current_vip_level : 1}.webp`" alt="" />
        </div>
      </div>
      <!-- <div class="head_down">
        <div class="vip_progress">
          <div class="vip_now">
            <span>VIP{{ hasLogin ? VIPinfo.current_vip_level : 0 }}</span>
            <iconpark-icon class="close " icon-id="mineiconhuangg" size="1rem"></iconpark-icon>
          </div>
          <div class="vip_now">
            <span>VIP{{ hasLogin ? VIPinfo.current_vip_level + 1 : 1 }}</span>
            <iconpark-icon class="close " icon-id="mineiconhuangg" size="1rem"></iconpark-icon>
          </div>
        </div>
        <div class="mt-5">
          <nut-progress :percentage="(VIPinfo.total_bet_money / target_bet_money) * 100 || 0" stroke-width="10"
            :show-text="false" />
        </div>
        <div class="role mt-4">
          <span class="level_role" v-shrink-on-click @click="router.push('/vip/rule')">{{ t('vip_level_rule') }}</span>
          <div class="need_add ">
            <span>{{ t('mine_remainBet') }}</span>
            <nut-price :price="hasLogin ? target_bet_money - VIPinfo.total_bet_money : 0" size="small"
              style="color:#fff;" :decimal-digits="0" thousands :need-symbol="false" />
          </div>
        </div>
      </div> -->
    </div>

  </div>
</template>

<script setup lang='ts'>
import {computed, ref} from 'vue'
import { useI18n } from "vue-i18n";
import { User } from '@/store/user';
import { storeToRefs } from 'pinia';
import pinia from '@/store/index';
import avatarSettings from './avatarSettings.vue';
import {useRouter} from "vue-router";

const { t } = useI18n();
const store = User(pinia);
const router = useRouter();
const { VIPinfo, info, roleInfo, hasLogin }: any = storeToRefs(store);
const visibleSetting = ref(false)
// const target_bet_money: any = computed(() => {
//   if (VIPinfo.value && VIPinfo.value?.vip_level_reward_config?.length > 0) {
//     return VIPinfo.value?.vip_level_reward_config[VIPinfo.value?.current_vip_level || 0]?.target_bet_money
//   } else {
//     return 0
//   }
// })

const userMoney = computed(() => {
  return Intl.NumberFormat().format(roleInfo.value.money)
})

/**
 * @description 转换用户名
 */
function userNameHiding(number: string) {
  if (number) {
    const hiddenChars1 = '**';
    let visibleChars;
    visibleChars = number.slice(0, 2) + hiddenChars1 + number.slice(4);
    return visibleChars;
  }
}

const toLogin = async () => {
  if (!hasLogin.value) {
    await store.setLogin(true)
  }

}
const showSetAvatar = () => {
  if (!hasLogin.value) {
    return
  }
  visibleSetting.value = true
}

</script>

<style lang='scss' scoped>
.me_head {
  width: 100%;
  position: fixed;
  z-index: 10;
  background-color: #361e79;

  >div {
    background-image: url(/imgs/me/info_bg1.webp);
    background-size: 100% 100%;
    height: 145px;

    margin: 10px 15px;
  }

  .head_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 12px 5px 12px;
    width: 100%;

    .left_info {
      flex: 1;
      display: flex;
      align-items: center;
      margin-top: -30px;

      .user_icon {
        position: relative;

        img {
          height: 64px
        }

        .vip {
          height: 26px;
          position: absolute;
          bottom: -8px;
          left: -3px;
        }
      }

      .user_info {
        width: 100%;
        display: flex;
        flex-direction: column;

        span {
          &:nth-child(1) {
            width: 140px;
            display: inline-block;
            color: #FFFFFF;
            font-size: 14px;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          &:nth-child(2) {
            display: flex;
            align-items: center;
            color: #Ffffff;
            margin-top: 8px;
            font-size: 14px;
            font-weight: 400;
            border: 0.5px solid #8970B3;
            width: 120px;
            padding: 1px 3px;
            border-radius: 18px;
            background: linear-gradient(360deg, #3F2288 0%, #1F1049 100%);

            // border-image-source: linear-gradient(127.35deg, #B477BE -0.03%, #DFBAEC 25.79%, #8970B3 100.09%);

            img {
              height: 18px;
            }
          }
        }

      }
    }

    .left_right {
      width: 150px;


      img {
        height: 120px
      }
    }
  }

  .head_down {
    padding: 0px 30px;

    .vip_progress {
      display: flex;
      justify-content: space-between;
    }

    .role {
      display: flex;
      justify-content: space-between;

      .level_role {
        color: #FFFFFF;
        font-size: 12px;
        border-bottom: 1px solid #ffffff;
      }

      .need_add {
        span {
          &:nth-child(1) {
            color: #F1C232;
            font-size: 12px;
          }

          &:nth-child(2) {
            color: #Ffffff;
            font-size: 12px;
          }
        }
      }
    }

    .vip_now {
      display: flex;
      align-items: center;
      color: #FFFFFF;
      font-size: 12px;

      img {
        height: 13px;
        margin-left: 3px;
      }
    }
  }

}

:deep(.nut-progress .nut-progress-outer) {

  background: #000;
}

:deep(.nut-progress .nut-progress-outer .nut-progress-inner) {
  height: 6px;
  margin-top: 2px;
  margin-left: 2px;
  background: linear-gradient(90deg, #FA7800 0%, #FBCA37 100%);

}
</style>